Introduction to XML

Displaying Instructions in the Cookbook Program

Now, let's switch gears from CSS browser programming and add another feature to the cookbook project.

In our last lesson, you added code to the Cookbook program's Form_Load event that fills a listbox with the titles of all your recipes. Now you'll write some programming that reacts when the user clicks one of those titles in the listbox. This new code will display the clicked recipe's instructions.

Where should you put the new code? The user clicks a title in the listbox, so it makes sense to put the code inside the listbox's Click event.

If you thought it was impressive that it only took 15 lines of code in Lesson 3 to open the XML document and fill the listbox with titles, wait until you see how much you'll accomplish now with three lines of code!

But before writing the code, you need to add a textbox control to your form that will display a recipe's instructions. Let's do that first.

1. Run VS.
2. On the Start Page that displays when you run VS, double-click Cookbook that's listed under the Recent header. Either the Code window or the Design window opens, depending on which was visible when you last shut down VS. (If you shut down with an XML or other support file visible, the editor will display neither the Design nor the Code window.)
3. If you see neither window, that's okay. Choose View > Solution Explorer, and then double-click Form1.vb in the Solution Explorer pane.
4. If you see the Design window, proceed to step 6 below.
5. If you see the Code window, right-click a blank area in that window, and choose View Designer from the context menu.
6. Click the Toolbox tab on the left side to display it.
7. Drag the textbox control from the toolbox, and drop it on your form. (Alternatively, you can single-click it to "pick it up" and then single-click on the form to place it. A third way to add a control is to double-click it. It then automatically appears in the center of the form.)

Textbox control dragged onto the form

8. Double-click the textbox's Multiline property in the Properties window to change it from False to True. (This allows you to resize the textbox so it can display more than one line of text.)
9. Also in the Properties window, change the textbox's Name property to txtInstructions.
10. Drag the small white handles around the textbox to enlarge it like this:

Textbox enlarged and aligned with the other controls

Great. Now you're ready to add your programming code to the listbox's Click_Event.

1. Double-click the listbox to open in the Code window.
   
   By default, the editor displays a listbox's SelectedIndexChanged event, but that's not what you want. You want to use the Click event instead.
2. Click the down arrow symbol to drop down this list of events.
    
   The Click event
3. Scroll through the list of events to find the Click event, and then click your mouse. The editor now enters the listbox's Click event into the code window:

Private Sub lstTitles_Click(sender As Object, e As EventArgs) Handles lstTitles.Click


End Sub

4. Now, get rid of the default SelectedIndexChanged event code in the Code window by dragging your mouse to select the whole thing (from Private to End Sub) and then pressing the DEL key to delete it:

    Private Sub lstTitles_SelectedIndexChanged(sender As Object, e As EventArgs) Handles lstTitles.SelectedIndexChanged


 


    End Sub

It's not essential that you delete this unused sub. It won't do any harm when the program runs, because it contains no code. It does nothing. But while you're writing code, this empty event is debris—just distracting. So it's best to remove it.

5. Copy the following highlighted code (drag to select, and then press CTRL + C to copy it), and paste it between the Private Sub lstTitles_Click and End Sub lines (click to place your blinking insertion cursor in there, and then press CTRL + V to paste).

Private Sub lstTitles_Click(sender As Object, e As EventArgs) Handles lstTitles.Click

   Dim IndividualRecipe As XmlNode

   IndividualRecipe = doc.SelectSingleNode("descendant::recipe[title='" & lstTitles.SelectedItem & "']")

   txtInstructions.Text = (IndividualRecipe.LastChild.InnerText)
End Sub

Excellent work!

Beware of Word Wrap

Sometimes a line of code is quite long—too long to display on a single line in the editor. So the editor "wraps" part of the line down onto a second line. Unless your code window is really wide, it's possible that this line will "word wrap" on your monitor and appear as two lines:

IndividualRecipe = doc.SelectSingleNode("descendant::recipe[title='" & lstTitles.SelectedItem & "']")

But this is still only one line of code!

The editor will let you know when a line wraps by displaying a curved green arrow on the right side of the Code window, like this: 

 
Word wrap cue

VB executes code line by line, as if it were a numbered list of tasks you want VB to perform. If you see the green arrow, be sure you don't press the ENTER key to break this long line into two lines! Instead, maximize the editor (click the maximize icon at the top right of the VS window) so the code has enough room to show up as a single line.

Looking at the Code Line by Line

All right, let's look at this code one line at a time. It's pretty amazing. It does an awful lot in those three lines. And one of the lines is just a simple Dim variable declaration.

The first line of code names an object variable, which I decided to call IndividualRecipe.

Dim IndividualRecipe As XmlNode

In the next line, this object variable will be given a copy of the instruction element that matches whatever title the user clicked. (Remember, for our purposes, node is just another word for element.)

IndividualRecipe = doc.SelectSingleNode("descendant::recipe[title='" & lstTitles.SelectedItem & "']")

This line of code is your first exposure to XPath, the language XML uses to search documents. We'll talk more about this later in the course, but for now, here's all you need to know:

The XPath code line first looks in the doc (our recipes.XML file) to find the title the user clicked (lstTitles.SelectedItem). Then XPath copies that entire recipe element and stores it in the IndividualRecipe variable.

You remember our old friend doc, don't you? When your program first starts running (up in the Form_Load event), doc is given a copy of the recipes.xml file. Now here in this XPath line of code, we're searching through doc to fetch the recipe the user wants to see.

The last code line just copies the instructions into the textbox:

txtInstructions.Text = (IndividualRecipe.LastChild.InnerText)

Recall that InnerText means the contents of an element (its data stripped of its tags). And because our recipe elements have two child elements (<title> and <instructions>), the LastChild element is the instructions.

One Last Thing . . .

We have one more small job to do. As is, the program works fine: When the user clicks a title, its instructions show up in the textbox. Try it by pressing F5 to test the program. Do you see the one thing you might want to improve?

When the program first runs, no instructions show up in the textbox because the user hasn't clicked a title yet. It makes more sense to the user—it's better UI design—if he or she can see instructions for the first recipe. You don't want to begin your program with a big, blank textbox. Some users might start typing into it!

To display the instructions, all you have to do is simulate the user clicking the listbox by adding two lines to the end of the Form_Load event:

The first new line selects the first title, and then the second line just triggers the listbox's Click event—same as if the user had clicked it. This second line shows you how you can execute one sub from another.

If you haven't already added these two lines to your cookbook program, go ahead and do it now!

Worry Not!

Remember, you don't need to memorize this code. If you ever need to do this job—fetch the contents of a specific element from an XML document—this code shows one way do it. To reuse this code, just change the variable names to whatever names you're using in your new program.

Or you can Google for something like vb get a specific element from an XML document. Google will list various code examples showing a variety of different ways to accomplish this task. Some of them will be the same approach we're using here in the cookbook program. Use whatever works or whatever approach appeals to you.

By the way, when you're Googling for example code, it's best to put vb right at the start of your search phrase to eliminate example code written in other programming languages!

You did it! Let's meet in Chapter 5 for a quick wrap-up.

Summary

Great job! You now have a solid foundation in CSS. You learned how to make XML content look good in browsers and other applications. You transformed raw XML data into attractive, readable text blocks. You saw how to link an XML file to the CSS file that formats it. And you practiced creating style rules using correct CSS punctuation, property/value pairs, and relative length values.

Beyond that, you tested your style rules by employing the programmer's experiment cycle—switching back and forth between modifying CSS styles in Notepad and then seeing the effect in Internet Explorer.

Here's your challenge for this lesson:

XML Challenge!!

See if you can modify the Cookbook CSS Stylesheet.css file to add quite a bit of whitespace between the recipes. Try changing one of the style rules so the document looks something like this in IE:

Lots of whitespace

In the next lesson, we'll be exploring XSL. It not only formats XML documents like CSS, but it can actually transform them!